<template>
	<van-uploader
		:preview-image="false"
		v-model="uploader"
		:before-read="beforeRead"
		:after-read="afterRead"
		:max-count="1"
		accept="image/*"
	>
	</van-uploader>
</template>

<script>
import { Uploader } from 'vant';
export default {
	name: 'PhotoUploader',
	components:{
		'van-uploader':Uploader
	},
	data() {
		return {
			uploader: [],
			fileType: ''
		}
	},
	methods: {
		afterRead(file) {
			console.log(file)
			this.fileType = file.file.name
			// 处理图片
			this.imgPreview(file.file)
		},
		beforeRead(file) {
			console.log(file)
			// Cancel upload if user is taking a photo
			return true
		},
		//将base64转换为文件
		dataURLtoFile(dataurl) {
			var arr = dataurl.split(',')
			var bstr = atob(arr[1])
			var n = bstr.length
			var u8arr = new Uint8Array(n)
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n)
			}
			return new File([u8arr], this.fileType, {
				type: 'image/jpeg'
			})
		},
		compress(img) {
			let canvas = document.createElement('canvas')
			let ctx = canvas.getContext('2d')
			//瓦片canvas
			let tCanvas = document.createElement('canvas')
			let tctx = tCanvas.getContext('2d')
			// let initSize = img.src.length;
			let width = img.width
			let height = img.height
			//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
			let ratio
			if ((ratio = (width * height) / 4000000) > 1) {
				// console.log("大于400万像素");
				ratio = Math.sqrt(ratio)
				width /= ratio
				height /= ratio
			} else {
				ratio = 1
			}
			canvas.width = width
			canvas.height = height
			// 铺底色
			ctx.fillStyle = '#fff'
			ctx.fillRect(0, 0, canvas.width, canvas.height)
			//如果图片像素大于100万则使用瓦片绘制
			let count
			if ((count = (width * height) / 1000000) > 1) {
				count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片
				//            计算每块瓦片的宽和高
				let nw = ~~(width / count)
				let nh = ~~(height / count)
				tCanvas.width = nw
				tCanvas.height = nh
				for (let i = 0; i < count; i++) {
					for (let j = 0; j < count; j++) {
						tctx.drawImage(
							img,
							i * nw * ratio,
							j * nh * ratio,
							nw * ratio,
							nh * ratio,
							0,
							0,
							nw,
							nh
						)
						ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
					}
				}
			} else {
				ctx.drawImage(img, 0, 0, width, height)
			}
			//进行最小压缩
			let ndata = canvas.toDataURL('image/jpeg', 0.6)
			tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
			return ndata
		},
		// 处理图片
		imgPreview(file) {
			let self = this
			// 看支持不支持FileReader
			if (!file || !window.FileReader) return
			if (/^image/.test(file.type)) {
				// 创建一个reader
				let reader = new FileReader()
				// 将图片2将转成 base64 格式
				reader.readAsDataURL(file)
				// 读取成功后的回调
				reader.onloadend = function () {
					let result = this.result
					let img = new Image()
					img.src = result
					if (this.result.length <= 500 * 1024) {
						self.headerImage = this.result
						// self.postImg();
						let file2 = self.dataURLtoFile(self.headerImage)
						console.log(file2)
						let data = new window.FormData()
						data.append('file', file2)

						self.uploader[self.uploader.length - 1].status = 'uploading'
						self.uploader[self.uploader.length - 1].message = '上传中...'

						// let data = new FormData();
						// data.append("file", file.file);
						// upload_file(data).then((res) => {
						// 	if (res.succeed) {
						// 		self.$emit('uploadSuccess', res.data, self.bizType, file)
						// 		self.uploader[self.uploader.length - 1].status = 'done'
						// 		// 这里需要看上传成功后this.uploader是否有值
						// 	} else {
						// 		self.uploader[self.uploader.length - 1].status = 'failed'
						// 		self.uploader[self.uploader.length - 1].message = '上传失败'
						// 	}
						// })
					} else {
						img.onload = function () {
							let data1 = self.compress(img)
							self.headerImage = data1
							let file2 = self.dataURLtoFile(self.headerImage)
							let data = new window.FormData()
							data.append('file', file2)

							self.uploader[self.uploader.length - 1].status = 'uploading'
							self.uploader[self.uploader.length - 1].message = '上传中...'

							// upload_file(data).then((res) => {
							// 	if (res.succeed) {
							// 		self.$emit('uploadSuccess', res.data, self.bizType, file)
							// 		self.uploader[self.uploader.length - 1].status = 'done'
							// 		// 这里需要看上传成功后this.uploader是否有值
							// 	} else {
							// 		self.uploader[self.uploader.length - 1].status = 'failed'
							// 		self.uploader[self.uploader.length - 1].message = '上传失败'
							// 	}
							// })
						}
					}
					// 判断图片是否大于500K,是就直接上传，反之压缩图片
					// if (this.result.length <= 500 * 1024) {
					//   self.headerImage = this.result;
					//   // self.postImg();
					// } else {
					//   img.onload = function () {
					//     let data = self.compress(img, Orientation);
					//     self.headerImage = data;
					//     self.postImg();
					//   };
					// }
				}
			}
		}
	},
	watch: {}
}
</script>
